<template>
  <div class="box">
    {{ type }}
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps(['type'])
const typeToColors = {
  [-1]: 'red',
  0: 'gray',
  1: 'red'
}
const color = computed(() => typeToColors[props.type])
</script>

<style lang="scss" scoped>
.box {
  width: 25px;
  height: 25px;
  margin: 2px;
  background-color: v-bind(color);
}
</style>
